<section id="work">
	<div class="heading">
		<div class="container">
			<h1>
				My<span>Jobs</span>
			</h1>
		</div>
	</div>
	<div class="container">
		<div class="section">
			<div class="row">
				<div class="col-md-12">
					<div class="filters">
						<a class="filter" data-filter="all">todas</a> 
						<a class="filter" data-filter="website">website</a> 
						<a class="filter" data-filter="design">design</a> 
						<a class="filter" data-filter="photography">photography</a>
					</div>
					<ul class="projects hoverdir three-columns">
						<li class="mix photography">
							<figure>
								<img src="img/work/work1.jpg" class="img-responsive" alt="work1">
								<figcaption>
									<h4 class="project-title">Proyecto 1</h4>
									<!-- para el filtro -->
									<p>photography</p>
								</figcaption>
							</figure>
							<div class="control">
								<a href="img/work/work1.jpg" data-rel="prettyPhoto"
									class="preview"> <span class="icon-location-arrow"></span>
								</a>
								<!-- enlace externo permanente -->
								<a href="#" class="permalink"><span class="icon-link"></span></a>
							</div>
						</li>
						<li class="mix website">
							<figure>
								<img src="img/work/work2.jpg" class="img-responsive" alt="work2">
								<figcaption>
									<h4 class="project-title">Proyecto 2</h4>
									<p>website</p>
								</figcaption>
							</figure>
							<div class="control">
								<a href="img/work/work2.jpg" data-rel="prettyPhoto"
									class="preview"> <span class="icon-location-arrow"></span>
								</a> <a href="#" class="permalink"><span class="icon-link"></span></a>
							</div>
						</li>
						<li class="mix design photography">
							<figure>
								<img src="img/work/work3.jpg" class="img-responsive" alt="work3">
								<figcaption>
									<h4 class="project-title">Proyecto 3</h4>
									<p>design, photography</p>
								</figcaption>
							</figure>
							<div class="control">
								<a href="img/work/work3.jpg" data-rel="prettyPhoto"
									class="preview"><span class="icon-location-arrow"></span></a> <a
									href="#" class="permalink"><span class="icon-link"></span></a>
							</div>
						</li>
						<li class="mix design">
							<figure>
								<img src="img/work/work4.jpg" class="img-responsive" alt="work4">
								<figcaption>
									<h4 class="project-title">Proyecto 4</h4>
									<p>design</p>
								</figcaption>
							</figure>
							<div class="control">
								<a href="img/work/work4.jpg" data-rel="prettyPhoto"
									class="preview"><span class="icon-location-arrow"></span></a> <a
									href="#" class="permalink"><span class="icon-link"></span></a>
							</div>
						</li>
						<li class="mix photography">
							<figure>
								<img src="img/work/work5.jpg" class="img-responsive" alt="work5">
								<figcaption>
									<h4 class="project-title">Proyecto 5</h4>
									<p>photography</p>
								</figcaption>
							</figure>
							<div class="control">
								<a href="img/work/work5.jpg" data-rel="prettyPhoto"
									class="preview"><span class="icon-location-arrow"></span></a> <a
									href="#" class="permalink"><span class="icon-link"></span></a>
							</div>
						</li>
						<li class="mix website design">
							<figure>
								<img src="img/work/work6.jpg" class="img-responsive" alt="work6">
								<figcaption>
									<h4 class="project-title">Proyecto 6</h4>
									<p>website, design</p>
								</figcaption>
							</figure>
							<div class="control">
								<a href="img/work/work6.jpg" data-rel="prettyPhoto"
									class="preview"><span class="icon-location-arrow"></span></a> <a
									href="#" class="permalink"><span class="icon-link"></span></a>
							</div>
						</li>
						<li class="mix design">
							<figure>
								<img src="img/work/work7.jpg" class="img-responsive" alt="work7">
								<figcaption>
									<h4 class="project-title">Proyecto 7</h4>
									<p>design</p>
								</figcaption>
							</figure>
							<div class="control">
								<a href="img/work/work7.jpg" data-rel="prettyPhoto"
									class="preview"><span class="icon-location-arrow"></span></a> <a
									href="#" class="permalink"><span class="icon-link"></span></a>
							</div>
						</li>
						<li class="mix photography">
							<figure>
								<img src="img/work/work8.jpg" class="img-responsive" alt="work8">
								<figcaption>
									<h4 class="project-title">Proyecto 8</h4>
									<p>photography</p>
								</figcaption>
							</figure>
							<div class="control">
								<a href="img/work/work8.jpg" data-rel="prettyPhoto"
									class="preview"><span class="icon-location-arrow"></span></a> <a
									href="#" class="permalink"><span class="icon-link"></span></a>
							</div>
						</li>
						<li class="mix website">
							<figure>
								<img src="img/work/work9.jpg" class="img-responsive" alt="work9">
								<figcaption>
									<h4 class="project-title">Proyecto 9</h4>
									<p>website</p>
								</figcaption>
							</figure>
							<div class="control">
								<a href="img/work/work9.jpg" data-rel="prettyPhoto"
									class="preview"><span class="icon-location-arrow"></span></a> <a
									href="#" class="permalink"><span class="icon-link"></span></a>
							</div>
						</li>
						<li class="mix website photography">
							<figure>
								<img src="img/work/work10.jpg" class="img-responsive"
									alt="work10">
								<figcaption>
									<h4 class="project-title">Proyecto 10</h4>
									<p>website, photography</p>
								</figcaption>
							</figure>
							<div class="control">
								<a href="img/work/work10.jpg" data-rel="prettyPhoto"
									class="preview"><span class="icon-location-arrow"></span></a> <a
									href="#" class="permalink"><span class="icon-link"></span></a>
							</div>
						</li>
						<li class="mix photography">
							<figure>
								<img src="img/work/work11.jpg" class="img-responsive"
									alt="work11">
								<figcaption>
									<h4 class="project-title">Proyecto 11</h4>
									<p>photography</p>
								</figcaption>
							</figure>
							<div class="control">
								<a href="img/work/work11.jpg" data-rel="prettyPhoto"
									class="preview"><span class="icon-location-arrow"></span></a> <a
									href="#" class="permalink"><span class="icon-link"></span></a>
							</div>
						</li>
						<li class="mix website">
							<figure>
								<img src="img/work/work12.jpg" class="img-responsive"
									alt="work12">
								<figcaption>
									<h4 class="project-title">Proyecto 12</h4>
									<p>website</p>
								</figcaption>
							</figure>
							<div class="control">
								<a href="img/work/work12.jpg" data-rel="prettyPhoto"
									class="preview"><span class="icon-location-arrow"></span></a> <a
									href="#" class="permalink"><span class="icon-link"></span></a>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</section>